<template>
    <view class="login">
        <view class="logo">
            <view class="circle">
                <u-image :showLoading="true" src="../../static/system/login.png" width="100rpx" height="100rpx"></u-image>
            </view>
        </view>
        <view class="input">
            <u-input v-model="phone" placeholder="请输入手机号码" border="none" clearable type="number" maxlength="11"
                :autoBlur="true" class="u_input_number"></u-input>
        </view>
        <view class="permission">
            <u-checkbox-group v-model="permission">
                <u-checkbox size="14" shape="circle" activeColor="#009a89" :name="1" labelSize="24rpx" labelColor="#FFF"
                    label='登录即代表阅读并同意《用户协议》和《隐私政策》' class="label_checkbox"></u-checkbox>
            </u-checkbox-group>
        </view>
        <view class="login_btn">
            <u-button type="primary" text="获取验证码" class="btn" @click="getVerificationCode"></u-button>
        </view>
        <view class="register"><span @click="toRegister">手机号注册</span></view>
        <u-toast ref="toastRef"></u-toast>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import constants from '@/utils/constants';
import { encrypt } from '@/utils/crypto'
import { phoneIsExist } from '@/api/login/login'

const permission = ref([])
const phone = ref('')
const toastRef: any = ref(null)

onMounted(() => {
    initLabel()
    initAddListener()
})
const initLabel = () => {
    let labelDom = document.getElementsByClassName('label_checkbox')[0]
    labelDom.children[1].innerHTML = `<span>登录即代表阅读并同意<span class='agreement'>《用户协议》</span>和<span class='privacy'>《隐私政策》</span></span>`
}
const initAddListener = () => {
    document.getElementsByClassName('agreement')[0].addEventListener('click', readAgreement)
    document.getElementsByClassName('privacy')[0].addEventListener('click', readPrivacyAgreement)
}
const readAgreement = () => {
    console.log('阅读用户协议')
}
const readPrivacyAgreement = () => {
    console.log('阅读隐私协议')
}
const getVerificationCode = () => {
    if (!constants.PATTERN.MOBILE.test(phone.value)) {
        toastRef.value.show({
            type: 'default',
            message: "手机号不正确",
            position: 'top',
            duration: 3000
        })
        return
    }
    if (permission.value.length == 0) {
        toastRef.value.show({
            type: 'default',
            message: "请同意用户协议和隐私政策",
            position: 'top',
            duration: 3000
        })
        return
    }
    phoneIsExist({ phone: phone.value }).then((res: any) => {
        if (res.code != 200) {
            return
        }
        uni.navigateTo({
            url: 'verificationCode?phone=' + encrypt(phone.value),
        })
    })

}
const toRegister = () => {
    uni.navigateTo({
        url: 'registerByPhone',
    })
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #009a89, #FFF);
    overflow: hidden;

    .logo {
        margin-top: 120rpx;
        width: 100%;
        height: 160rpx;
        display: flex;
        justify-content: center;

        .circle {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            background-image: radial-gradient(circle, #FFF, #cbe4e1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .input {
        width: calc(100% - 60rpx);
        height: 104rpx;
        margin-top: 100rpx;
        padding: 0 30rpx;

        .u_input_number {
            width: calc(100% - 60rpx);
            height: 100%;
            line-height: 100%;
            background-color: #FFF;
            border-radius: 20rpx;
            padding: 0 30rpx !important;
        }
    }

    .permission {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
    }

    .login_btn {
        width: calc(100% - 60rpx);
        height: 90rpx;
        padding: 0 30rpx;
        margin-top: 100rpx;

        .btn {
            height: 90rpx;
            border-radius: 45rpx;
            font-size: 40rpx;
        }
    }

    .register {
        width: 100%;
        font-size: 24rpx;
        line-height: 50rpx;
        text-align: center;
        color: #009a89;
        margin-top: 20rpx;

        span {
            border-bottom: 1px solid #009a89;
        }
    }
}

::v-deep .u-radio__icon-wrap {
    background-color: #FFF;
}

::v-deep .agreement {
    color: #FFF
}

::v-deep .privacy {
    color: #FFF;
}
</style>

